<template>
<div>
    <table border="1" cellspacing="0" width="80%">
      <thead>
        <tr>
          <th>姓名</th><th>生日</th><th>职位</th><th>状态</th><th>操作</th>

        </tr>
      </thead>
        <tr v-for="em in cutBean.records" :key="em.id">
          <td>{{em.name}}</td>
          <td>{{em.birthday}}</td>
          <td>{{em.job}}</td>
          <td>{{em.status}}</td>
          <td>
            <input type="button" v-if="em.status=='在职'" value="离职" @click="dimission(em.id)">
            <input type="button" v-if="em.status=='在职'" value="修改" @click="findById(em.id)">
          </td>
        </tr>
      <tbody>

      </tbody>
    </table>
  <div>
    <input type="button" v-for="pg in cutBean.pages" :key="pg"
    :value="pg" style="margin-left: 10px" @click="findByItem(pg)">
  </div>
  <input type="button" value="添加" @click="isAddDiv=true">
  <div>
    姓名：<input type="text" v-model="findObj.name">
    起始日期：<input type="text" v-model="findObj.startDate">
    结束日期：<input type="text" v-model="findObj.endDate">
    <input type="button" value="查询" @click="findByItem(1)"/>
  </div>
  <div class="dialogDiv" v-if="isUpdateDiv">
    <div class="contentDiv">
      <img :src="'/project/emImg/'+updateObj.face" width="300" height="300"><br>
      姓名：{{updateObj.name}}<br>
      生日：{{updateObj.birthday}}<br>
      职位：<input type="text" v-model="updateObj.job"><br>
      状态：{{updateObj.status}}<br>
      <input type="button" value="修改" @click="updateEmployee()">
    </div>
  </div>

  <div class="dialogDiv" v-if="isAddDiv">
    <div class="contentDiv">
      姓名：<input type="text" v-model="addObj.name"><br>
      生日：<input type="text" v-model="addObj.birthday"><br>
      职位：<input type="text" v-model="addObj.job"><br>
      头像：<input type="file" ref="faceFile"><br>
      <input type="button" value="添加" @click="addEmployee()">
    </div>
  </div>
</div>

</template>

<script>
import axios from "axios";
export default {
name: "employee",
data(){
    return{
    cutBean:{},//动态条件查询的分页对象
      findObj:{},//查询条件对象
      isUpdateDiv:false,//是否显示修改弹出框
      isAddDiv:false,//是否显示添加弹出框
      updateObj:{},//修改对象
      addObj:{},//添加对象
        }
    },
  methods:{
    findByItem(pageNO){
      this.findObj.pageNO=pageNO;
      axios.get("/project/em/findByItem",{params:this.findObj}).then(resp=>{
        this.cutBean=resp.data;
      })
    },
    dimission(id){
      axios.get("/project/em/del",{params:{id}}).then(resp=>{
        if (resp.data=="ok"){
          this.findByItem(1);
        }
      })
    },
    findById(id){
      this.isUpdateDiv=true;
      axios.get("/project/em/findById",{params:{id}}).then(resp=>{
       this.updateObj= resp.data;
      });
    },
    updateEmployee(){
      axios.get("/project/em/update",{params:this.updateObj}).then(resp=>{
        if (resp.data=="ok") {
          this.isUpdateDiv = false
          this.findByItem(1);
        }
      })
    },
   async addEmployee(){//添加员工
     //上传员工头像
      var emObj = new FormData();
      emObj.append("faceImg",this.$refs.faceFile.files[0]);
    //上传文件请求头
      let config={
        headers:{'Content-Type': 'multipart/form-data'}
      }
     //接收服务器发送给客户端的上传文件名
      var face="";
     await axios.post("/project/upload",emObj,config).then(resp=>{
       face = resp.data;
     });
     //将上传文件名，添加到addObj对象中
     this.addObj.face=face;
     //向服务器发送请求，完成添加
     axios.get("/project/em/add",{params:this.addObj}).then(resp=>{
       if (resp.data=="ok"){
         this.isAddDiv=false;
         this.findByItem(1);
       }
     })
    }
  },
  created() {
  this.findByItem(1);
  }
}
</script>

<style scoped>
.dialogDiv{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
  background: rgba(255,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.contentDiv{
  width: 600px;
  height: 400px;
  padding: 20px;
  border: 2px solid #000;
  background: white;
}
</style>